<template>
    <div class="ordering">
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: 'courseSchema' }">教师</el-breadcrumb-item>
            <el-breadcrumb-item>评分</el-breadcrumb-item>
            <el-breadcrumb-item>教师评分</el-breadcrumb-item>
        </el-breadcrumb>
        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">教师评分</h2>

        <!-- 先选择班级 -->
        <div style="margin:3% 3% 3% 3%;border: 1px solid #e0e0e0; border-radius: 5px;">

            <div style=" width: 92%; margin: 2% 5% 1% 3%; height: 50%;">
                <h1 style="border-bottom: 1px solid #CDD0D6;padding-bottom: 10px;">选择班级</h1>

                <div>
                    <el-table :data="mySchema" height="120" style="width: 100%; margin-top: 2px;">
                        <el-table-column prop="onloadDate" label="时间" :formatter="formatDate" />
                        <el-table-column prop="practicalType" label="实践类型" :formatter="formatType" />
                        <el-table-column prop="courseName" label="实践课程" />
                        <el-table-column prop="teachName" label="任课老师" />
                        <el-table-column prop="majorName" label="专业名称" />
                        <el-table-column prop="className" label="班级" />
                        <el-table-column fixed="right" label="详情" width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="choiseClass(scope.row.practicalId, scope.row.courseName, scope.row.className)">选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <h1 style="border-bottom: 1px solid #CDD0D6;padding-bottom: 10px;">班级详情</h1>
                <div v-if="getInfo.length != 1 && getInfo.length != 0">
                    <!-- 学生详情信息 -->
                    <div>
                        <el-table :data="getInfo" height="350" style="width: 100%;margin-top: 1%;">
                            <el-table-column prop="taskName" label="选题" min-width="100" :formatter="formateTask"  v-if="stuProType != 0"/>
                            <el-table-column prop="teamId" label="队伍编号" min-width="100" :formatter="formateTeam" v-if="stuProType != 0"/>
                            <el-table-column prop="courseName" label="课题名称" min-width="100" />
                            <el-table-column prop="stuName" label="学生姓名" min-width="100" />
                            <el-table-column prop="stuId" label="学生编号" min-width="100" />
                            <el-table-column prop="className" label="班级" min-width="100" />
                            <el-table-column prop="majorName" label="专业名称" min-width="100" />
                            <el-table-column fixed="right" label="分数" min-width="100">
                                <template #default="scope"><!-- 此处使用级联选择器，先选择专业方向再选企业 -->
                                    <!-- 看学生的互评分书 -->
                                    <el-button size="small" type="danger"
                                        v-if="scope.row.id != null && scope.row.finalScore == 0"
                                        @click="toScore(scope.row.processId, scope.row.stuPhone,)">评分</el-button>
                                    <span v-if="scope.row.id == null && scope.row.finalScore == 0">未提交报告</span>
                                    <span v-if="scope.row.id != null && scope.row.finalScore != 0">{{ scope.row.finalScore
                                    }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 打分 -->
                    <h1 style="border-bottom: 1px solid #CDD0D6;padding-bottom: 10px;">评分</h1>
                    <div style="margin-top: 1%;">
                        <el-row :gutter="20">
                            <el-col :span="6" :offset="5">
                                <div>
                                    <el-form :label-position="right" label-width="100px" style="width: 60%">
                                        <el-form-item label="学生互评分" size="large">
                                            <el-input-number :controls="false" v-model="score.stuScore" class="mx-4"
                                                :min="0" :max="100" controls-position="right" @change="handleChange"
                                                :readonly="true" />
                                        </el-form-item>
                                        <el-form-item label="过程打分" size="large">
                                            <el-input-number :controls="false" v-model="score.procressScore" class="mx-4"
                                                :min="0" :max="100" controls-position="right" @change="handleChange" />
                                        </el-form-item>
                                        <el-form-item label="结课报告分" size="large">
                                            <el-input-number :controls="false" v-model="score.finalScore" class="mx-4"
                                                :min="0" :max="100" controls-position="right" @change="handleChange" />
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div
                                    style=" height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                                    <el-button @click="sendScore" style="font-size:xxx-large; height: 60%; width: 50%;"
                                        round>{{
                                            score.lastScore }}</el-button>
                                    <el-text class="mx-1" type="info">点击分数提交</el-text>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <!-- 提示选择任务 -->
                <div v-if="getInfo.length == 1 || getInfo.length == 0" style="background-color: #F5F7FA;">
                    <h1
                        style="font-size: 32px; font-weight: bold; margin-top: 3%; text-align: center; background-color: #F5F7FA;">
                        请先选择需要评分的班级</h1>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeMount, watch } from 'vue'
import requests from '@/api/ajax.js'
import * as XLSX from "xlsx"
import { ElMessage } from 'element-plus'


onBeforeMount(() => {

    //获取每个班级的班级信息
    const getProcticalTask = requests({ url: "/inner/andCourse", method: "get", }).then(res => {
        mySchema.value = res.rdata
    })
        .catch(err => {
            console.error(err.data);
        });
})


const score = ref({
    reportId: '',
    stuScore: 0,
    procressScore: 0,
    finalScore: 0,
    lastScore: 0
})

// 学生选题状况
const getInfo = ref([
    {
        adviserId: '',
        adviserName: '',
        classId: '',
        className: '',
        content: '',
        courseId: '',
        courseName: '',
        endDate: '',
        enrolDate: '',
        finalScore: '',
        id: '',
        majorName: '',
        memberId: '',
        memberMax: '',
        onloadDate: '',
        planId: '',
        practicalId: '',
        practicalType: '',
        processId: '',
        publishId: '',
        scaleRule: '',
        startDate: '',
        stuId: '',
        stuName: '',
        stuPhone: '',
        taskName: '',
        teachId: '',
        teachName: '',
        teacherId: '',
        teacherName: '',
        teacherPhone: '',
        teamId: '',
        teamState: '',
        topicDate: '',
        topicId: '',
        topicState: '',
        topicTeamId: '',
        topicType: '',
        typeStr: '',
    }
])

// 监听教师评分的变化
watch(
    [() => score.value.stuScore, () => score.value.procressScore, () => score.value.finalScore],
    ([score1, score2, score3]) => {
        if (score2 == null && score3 != null) {
            let theScore = parseInt(score1) * 0.1 + parseInt(score3) * 0.5;
            score.value.lastScore = parseInt(theScore);
            score.value.procressScore = 0;
        } else if (score3 == null && score2 != null) {
            let theScore = parseInt(score1) * 0.1 + parseInt(score2) * 0.4;
            score.value.lastScore = parseInt(theScore);
            score.value.finalScore = 0;
        } else if (score2 == null && score3 == null) {
            let theScore = parseInt(score1) * 0.1;
            score.value.lastScore = parseInt(theScore);
            score.value.procressScore = 0;
            score.value.finalScore = 0;
        } else {
            let theScore = parseInt(score1) * 0.1 + parseInt(score2) * 0.4 + parseInt(score3) * 0.5;
            score.value.lastScore = Math.ceil(parseFloat(theScore));
        }
    }
)
//文件预览

// requests.get('/xlsx', {
//     responseType: "arraybuffer", // 设置响应体类型为arraybuffer
// }).then(({ data }) => {
//     let workbook = XLSX.read(new Uint8Array(data), { type: "array" }); // 解析数据
//     var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
//     this.tableau = XLSX.utils.sheet_to_html(worksheet); // 渲染
// })

//教师所有教学大纲的存放地
const mySchema = ref([{
    practicalId: '',
    classId: "",
    className: "",
    adviserId: '',
    adviserName: "",
    teachId: '',
    teachName: "",
    practicalType: '',
    onloadDate: "",
    courseSchema: '',
    planId: '',
    courseId: '',
    courseName: "",
    startDate: '',
    majorName: "",
    enrolDate: ""

}])

//提示信息
let selectInfo = ref({
    courseName: '',
    className: '',
})

let stuProType = ref('')

//点击班级详情后获取班级信息
function choiseClass(practicalId, courseName, className) {

    selectInfo.value.className = className;
    selectInfo.value.courseName = courseName;


    const asd = requests({ url: "/score/classTopicAoDetail/" + practicalId, method: "get", }).then(res => {
        if (res.code === 20041) {
            getInfo.value = res.rdata
        } else {
            getInfo.value = null
        }
        if (getInfo.value.length == 0) {
            ElMessage.warning('还未发布最终过程任务，无法评分');
        }else{
            stuProType.value=getInfo.value[0].practicalType;
        }
    })
        .catch(err => {
            console.error(err);
        });

}

//将表格中的实践规范为YY-MM-DD
function formatDate(row, column, cellValue, index) {
    if (cellValue != null) {
        let format = 'YYYY-mm-dd'
        let date = new Date(cellValue);
        const dataItem = {
            'Y+': date.getFullYear().toString(),
            'm+': (date.getMonth() + 1).toString(),
            'd+': date.getDate().toString(),
        }
        Object.keys(dataItem).forEach((item) => {
            const ret = new RegExp(`(${item})`).exec(format);
            if (ret) {
                format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
            }
        });
        return format
    } else {
        return null
    }


}

//提示未组队
function formateTeam(row, column, cellValue, index) {
    if (cellValue == 0) {
        const noTeam = '未组队'
        return noTeam
    } else {
        return cellValue
    }
}

//提示未选题
function formateTask(row, column, cellValue, index) {
    if (cellValue == null) {
        const noTask = '未选题'
        return noTask
    } else {
        return cellValue
    }
}

//获取学生互评分数
function toScore(processId, stuPhone) {

    const getStuScore = requests({ url: "/score/" + processId + "/" + stuPhone, method: "get" }).then(res => {
        if (res.code === 20041) {
            score.value.stuScore = res.rdata.score_final;
            score.value.reportId = res.rdata.reportId;
        } else if ((res.code === 20040)) {
            score.value.stuScore = 0;
            ElMessage.warning = res.msg;
        } else {
            ElMessage.error = '出现错误';
            score.value.stuScore = 0;
        }

    }).catch(err => {
        console.error(err);
    });

}

// 教师点击打分按钮
function sendScore() {

    const send = requests({ url: "/score/finallProcessTask", method: "post", data: score.value }).then(res => {
        if (res.code === 20041) {
            ElMessage.success(res.msg);
        } else if (res.code === 20040) {
            ElMessage.warning(res.msg);
        } else {
            ElMessage.error('服务发生问题');
        }
    }).catch(err => {
        console.error(err);
    });


}

function formatType (row, column, cellValue, index){
    let format = '';
    let practicalTypes = cellValue;
    if(practicalTypes === 0){
        format = '课程设计任务';
        return format;
    }else if(practicalTypes === 1){
        format = '校内实践课题';
        return format;
    }
}

</script>
<style scoped>
/* 使用 ::v-deep 选择器 */
::v-deep .el-collapse-item__content {
    background-color: #FAFAFA;

}

::v-deep .el-collapse-item__header {
    background-color: #F2F6FC;
    border-radius: 7px;
    border: 1px solid #F2F6FC;
    padding: 8px 12px;
}

.my-item {
    margin-bottom: 20px;
    /* 设置下方边距为 20px */
}
</style>